import bg from '../../assets/bg.jpg'
import Header from '../../conponents/header';
import Footter from '../../conponents/footter'
import Service from '../../conponents/service';
import { Form, Input, DatePicker, Select, Button, Upload, Radio, message } from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { useParams } from 'react-router-dom';
import axios from 'axios'
import Login from '../../conponents/login';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { BASE_URL } from '../../utils/request';



const Application = () => {
  const { t } = useTranslation()

  const { type } = useParams()
  const [form] = Form.useForm();

  let formData = {
    idFiles: [],
    photoFiles: [],
    videoFiles: [],
    birth: '',
    lastMenstrual: ''
  }
  const token = localStorage.getItem('token') || ''
  const [showLogin, setShowLogin] = useState(false);
  const onCloseLogin = (e) => {
    setShowLogin(e)
  }

  const onChangeDate = (e, dateString) => {
    formData.birth = dateString
  }
  const onChangeDate1 = (e, dateString) => {
    formData.lastMenstrual = dateString
  }
  const onIdChange = (e, i) => {
    formData.idFiles = e.fileList.filter(i => i.status === 'done').map(i => i.response.data)
  }
  const onPhotoChange = (e, i) => {
    console.log(e, i, 66);
    formData.photoFiles = e.fileList.filter(i => i.status === 'done').map(i => i.response.data)
    console.log(formData, 11);

  }
  const onODFinish = async (values) => {
    const data = {
      ...values,
      ...formData
    }
    console.log('Success:', data);
    const res = await axios({
      url: BASE_URL + 'system/od',
      method: 'post',   // 默认值
      headers: {
        Authorization: token
      },
      data
    })
    if (res.data.code === 200) {
      message.success('申请成功')
      form.resetFields(); // 重置表单
      formData = {
        idFiles: [],
        photoFiles: [],
        videoFiles: [],
        birth: '',
        lastMenstrual: ''
      }
    }
    else if (res.data.code === 401) {
      setShowLogin(true)
    } else {
      message.error(res.data.msg)
    }
  };
  let SDFormData = {
    idFiles: [],
    photoFiles: [],
    videoFiles: [],
    // lastMenstrual: '',
    // seriousMenstrual: ''
  }
  const onChangeDate_SD = (e, dateString) => {
    SDFormData.lastMenstrual = dateString
  }
  const onChangeDate1_SD = (e, dateString) => {
    SDFormData.seriousMenstrual = dateString
  }
  const onIdChange_SD = (e, i) => {
    SDFormData.idFiles = e.fileList.filter(i => i.status === 'done').map(i => i.response.data)
  }
  const onPhotoChange_SD = (e, i) => {
    console.log(e, i, 66);
    SDFormData.photoFiles = e.fileList.filter(i => i.status === 'done').map(i => i.response.data)
  }
  const onSDFinish = async (values) => {
    const data = {
      ...values,
      ...SDFormData
    }
    console.log('Success:', data);
    const res = await axios({
      url: BASE_URL + 'system/sm',
      method: 'post',   // 默认值
      headers: {
        Authorization: token
      },
      data
    })
    if (res.data.code === 200) {
      message.success('申请成功')
      form.resetFields(); // 重置表单
      SDFormData = {
        idFiles: [],
        photoFiles: [],
        videoFiles: [],
        lastMenstrual: '',
        seriousMenstrual: ''
      }
    } else if (res.data.code === 401) {
      setShowLogin(true)
    } else {
      message.error(res.data.msg)
    }
  };

  const props = {
    name: 'file',
    action: BASE_URL + 'system/file',
    headers: {
      authorization: 'authorization-text',
      Authorization: token
    },
    onChange(info) {
      if (info.file.status === 'done') {
        console.log(info.file, info.fileList);
        formData.videoFiles = info.fileList.filter(i => i.status === "done").map(i => i.response.data)
      }
    },
  };
  const props_SD = {
    name: 'file',
    action: BASE_URL + 'system/file',
    headers: {
      authorization: 'authorization-text',
      Authorization: token
    },
    onChange(info) {
      if (info.file.status === 'done') {
        console.log(info.file, info.fileList);
        SDFormData.videoFiles = info.fileList.filter(i => i.status === "done").map(i => i.response.data)
      }
    },
  };

  return (
    <>
      <div style={{ backgroundImage: `url(${bg})` }} className='h-auto bg-no-repeat bg-cover pt-10 pb-32'>
        <Header />
      </div>
      <div className="bg-[#E3F2DF] font-sans sm:py-10 p-5 sm:px-96 w-full">
        {/* OD */}
        <div className="bg-white p-8 rounded-lg shadow-md">
          <h2 className="text-2xl text-gray-800 mb-3 border-b-2 border-[#E3F2DF] pb-1">{t('申请成为')} {type} </h2>
          {type === 'OD' && <Form form={form} layout="vertical" onFinish={onODFinish}>
            <Form.Item name="code" className='mb-3' label={t('邀请码') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('邀请码')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="name" className='mb-3' label={t('姓名') + " 🚺:"} rules={[{ required: true, message: `${t('请输入')} ${t('姓名')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item className='mb-3' label={t('出生日期') + " 🗓️:"}>
              <DatePicker onChange={onChangeDate} className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="age" className='mb-3' label={t('年龄') + " 🗓️:"}>
              <Input type='number' className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="location" className='mb-3' label={t('所在地') + " 🌍:"}>
              <Select placeholder="">
                <Option value={t('台湾')}>{t('台湾')}</Option>
                <Option value={t('泰国')}>{t('泰国')}</Option>
                <Option value={t('美国')}>{t('美国')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="blood" className='mb-3' label={t('血型') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('血型')}` }]}>
              <Select placeholder="">
                <Option value="A+">A+</Option>
                <Option value="B+">B+</Option>
                <Option value="AB+">AB+</Option>
                <Option value="O+">O+</Option>
              </Select>
            </Form.Item>
            <Form.Item name="race" className='mb-3' label={t('种族') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="height" className='mb-3' label={t('身高') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('身高')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="weight" className='mb-3' label={t('体重') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('体重')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="skinColor" className='mb-3' label={t('肤色') + ":"}>
              <Select placeholder="">
                <Option value={t('白')}>{t('白')}</Option>
                <Option value={t('黑')}>{t('黑')}</Option>
                <Option value={t('黄')}>{t('黄')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="eyeColor" className='mb-3' label={t('眼睛颜色') + " 👁️:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="hairColor" className='mb-3' label={t('发色') + " 💁‍:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="firstLanguage" className='mb-3' label={t('母语') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="maritalStatus" className='mb-3' label={t('是否婚姻') + " 👩‍❤️‍👨:"}>
              <Radio.Group>
                <Radio value={0}>{t('否')}</Radio>
                <Radio value={1}>{t('是')}</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="plastic" className='mb-3' label={t('是否整过') + ":"}>
              <Radio.Group>
                <Radio value={0}>{t('否')}</Radio>
                <Radio value={1}>{t('是')}</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="education" className='mb-3' label={t('最高学历') + " 🎓:"} rules={[{ required: true, message: `${t('请输入')} ${t('最高学历')}` }]}>
              <Select placeholder="">
                <Option value={t('大专')}>{t('大专')}</Option>
                <Option value={t('本科')}>{t('本科')}</Option>
                <Option value={t('博士')}>{t('博士')}</Option>
                <Option value={t('硕士')}>{t('硕士')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="school" className='mb-3' label={t('大学名称') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="speciality" className='mb-3' label={t('专业科系') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="secondLanguage" className='mb-3' label={t('母语外您还会哪种语言') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="fluentLanguage" className='mb-3' label={t('第二语言是否可以说的流利？')}>
              <Radio.Group>
                <Radio value={0}>{t('否')}</Radio>
                <Radio value={1}>{t('是')}</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="occupation" className='mb-3' label={t('职业') + " 💼:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="personality" className='mb-3' label={t('性格') + " 😊:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="otherExpertise" className='mb-3' label={t('爱好和兴趣才能') + " ⚽🎨:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="menstrualTime" className='mb-3' label={t('月经一般持续几天？')} rules={[{ required: true, message: `${t('请输入')} ${t('月经一般持续几天？')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item className='mb-3' label={t('上次月经是什么时候？')} rules={[{ required: true, message: `${t('请输入')} ${t('上次月经是什么时候？')}` }]}>
              <DatePicker onChange={onChangeDate1} className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="exerciseHabit" className='mb-3' label={t('你运动吗？')}>
              <Select placeholder="">
                <Option value={t('经常运动')}>{t('经常运动')}</Option>
                <Option value={t('偶尔运动')}>{t('偶尔运动')}</Option>
                <Option value={t('很少运动')}>{t('很少运动')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="contactPhone" className='mb-3' label={t('联系电话') + " 📞:"} rules={[{ required: true, message: `${t('请输入')} ${t('联系电话')}` }]}>
              <Input type='number' className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="emContactPhone" className='mb-3' label={t('紧急联系人电话') + " 📱:"}>
              <Input type='number' className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="chatSoftware" className='mb-3' label={t('三方聊天软件') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="address" className='mb-3' label={t('家庭住址') + " 🏡:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="email" className='mb-3' label={t('邮件') + " ✉️:"}>
              <Input type="email" className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="idFiles" className='mb-3' label={t('证件照') + " 📸:"} rules={[{ required: true, message: `${t('请上传')} ${t('证件照')}` }]}>
              <Upload action={BASE_URL + 'system/file'} listType="picture-card" onChange={onIdChange}>
                <button style={{ border: 0, background: 'none' }} type="button">
                  <PlusOutlined />
                </button>
              </Upload>
            </Form.Item>
            <Form.Item name="photoFiles" className='mb-3' label={t('生活照片') + " 📸:"} rules={[{ required: true, message: `${t('请上传')} ${t('生活照片')}` }]}>
              <Upload action={BASE_URL + 'system/file'} listType="picture-card" onChange={onPhotoChange}>
                <button style={{ border: 0, background: 'none' }} type="button">
                  <PlusOutlined />
                </button>
              </Upload>
            </Form.Item>
            <Form.Item name="videoFiles" className='mb-3' label={t('生活视频') + " 🎥:"}>
              <Upload {...props}>
                <Button icon={<UploadOutlined />}>{t('上传视频')}</Button>
              </Upload>
            </Form.Item>
            <Form.Item className='flex justify-center mb-3'>
              <Button type="primary" htmlType="submit">{t('确认')}</Button>
            </Form.Item>
          </Form>}
          {type === 'SD' && <Form form={form} layout="vertical" onFinish={onSDFinish}>
            <Form.Item name="code" className='mb-3' label={t('邀请码') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('邀请码')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="name" className='mb-3' label={t('姓名') + " 🚺:"} rules={[{ required: true, message: `${t('请输入')} ${t('姓名')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="age" className='mb-3' label={t('年龄') + " ⏳:"} rules={[{ required: true, message: `${t('请输入')} ${t('年龄')}` }]}>
              <Input type='number' className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="height" className='mb-3' label={t('身高') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('身高')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="weight" className='mb-3' label={t('体重') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('体重')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="blood" className='mb-3' label={t('血型') + ":"} rules={[{ required: true, message: `${t('请输入')} ${t('血型')}` }]}>
              <Select placeholder="">
                <Option value="A+">A+</Option>
                <Option value="B+">B+</Option>
                <Option value="AB+">AB+</Option>
                <Option value="O+">O+</Option>
              </Select>
            </Form.Item>
            <Form.Item name="skinColor" className='mb-3' label={t('肤色') + ":"}>
              <Select placeholder="">
                <Option value={t('白')}>{t('白')}</Option>
                <Option value={t('黑')}>{t('黑')}</Option>
                <Option value={t('黄')}>{t('黄')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="eyeColor" className='mb-3' label={t('眼睛颜色') + " 👁️:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="education" className='mb-3' label={t('最高学历') + " 🎓:"} rules={[{ required: true, message: `${t('请输入')} ${t('最高学历')}` }]}>
              <Select placeholder="">
                <Option value={t('大专')}>{t('大专')}</Option>
                <Option value={t('本科')}>{t('本科')}</Option>
                <Option value={t('博士')}>{t('博士')}</Option>
                <Option value={t('硕士')}>{t('硕士')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="occupation" className='mb-3' label={t('职业') + " 💼:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="otherExpertise" className='mb-3' label={t('爱好和兴趣才能') + " ⚽:"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            {/* <Form.Item name="childNum" className='mb-3' label={t('有多少孩子出生') + ":"}>
              <Input type='number' className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="childSex" className='mb-3' label={t('小孩性别') + " 👩‍🔬:"}>
              <Select placeholder="">
                <Option value={t('男')}>{t('男')}</Option>
                <Option value={t('女')}>{t('女')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="deliveryMethod" className='mb-3' label={t('生产方式') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="childWeight" className='mb-3' label={t('出生重量') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="contraception" className='mb-3' label={t('如何预防怀孕') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="maritalStatus" className='mb-3' label={t('是否婚姻') + " 👩‍❤️‍👨:"}>
              <Radio.Group>
                <Radio value={0}>{t('否')}</Radio>
                <Radio value={1}>{t('是')}</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="marry" className='mb-3' label={t('我可以结婚吗') + ":"}>
              <Select placeholder="">
                <Option value={t('可以')}>{t('可以')}</Option>
                <Option value={t('不可以')}>{t('不可以')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="abortion" className='mb-3' label={t('是否堕过胎') + ":"}>
              <Radio.Group>
                <Radio value={0}>{t('否')}</Radio>
                <Radio value={1}>{t('是')}</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="operation" className='mb-3' label={t('你病了吗？糖尿病、甲状腺低血压、血液甲状腺') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="anodyne" className='mb-3' label={t('需要定期使用止痛药的情况') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="foreignBirth" className='mb-3' label={t('请问你可以去中国吗？老挝？柬埔寨？乔治亚州？')}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="threeMenstrual" className='mb-3' label={t('过去 3 个月你的月经周期是多少？')} rules={[{ required: true, message: `${t('请输入')} ${t('过去 3 个月你的月经周期是多少？')}` }]}>
              <Input className="border border-gray-300 rounded mb-2" />
            </Form.Item>
            <Form.Item name="threeMenstrualTime" className='mb-3' label={t('在过去的三个月里，你的月经持续了几天？多久？')} rules={[{ required: true, message: `${t('请输入')} ${t('在过去的三个月里，你的月经持续了几天？多久？')}` }]}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="seriousMenstrual" className='mb-3' label={t('哪天月经出血更严重？')} rules={[{ required: true, message: `${t('请输入')} ${t('哪天月经出血更严重？')}` }]}>
              <DatePicker onChange={onChangeDate_SD} className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="lastMenstrual" className='mb-3' label={t('最后一次月经 ') + t('年 / 月 / 日') + " 🗓️"} rules={[{ required: true, message: `${t('请输入')} ${t('最后一次月经')} ${t('年 / 月 / 日')}` }]}>
              <DatePicker onChange={onChangeDate1_SD} className="border border-gray-300 rounded" />
            </Form.Item> */}
            <Form.Item name="contactPhone" className='mb-3' label={t('联系电话') + " 📞:"} rules={[{ required: true, message: `${t('请输入')} ${t('联系电话')}` }]}>
              <Input type='number' className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="emContactPhone" className='mb-3' label={t('紧急联系人电话') + " 📱:"}>
              <Input type='number' className="border border-gray-300 rounded" />
            </Form.Item>
            <Form.Item name="location" className='mb-3' label={t('所在地') + " 🌍:"}>
              <Select placeholder="">
                <Option value={t('台湾')}>{t('台湾')}</Option>
                <Option value={t('泰国')}>{t('泰国')}</Option>
                <Option value={t('美国')}>{t('美国')}</Option>
              </Select>
            </Form.Item>
            <Form.Item name="chatSoftware" className='mb-3' label={t('三方聊天软件') + ":"}>
              <Input className="border border-gray-300 rounded" />
            </Form.Item>
            {/* <Form.Item name="idFiles" className='mb-3' label={t('证件照') + " 📸:"} rules={[{ required: true, message: `${t('请上传')} ${t('证件照')}` }]}>
              <Upload action="http://47.76.182.215/prod-api/system/file" listType="picture-card" onChange={onIdChange}>
                <button style={{ border: 0, background: 'none' }} type="button">
                  <PlusOutlined />
                </button>
              </Upload>
            </Form.Item> */}
            <Form.Item name="photoFiles" className='mb-3' label={t('生活照片') + " 📸:"} rules={[{ required: true, message: `${t('请上传')} ${t('生活照片')}` }]}>
              <Upload action={BASE_URL + 'system/file'} listType="picture-card" onChange={onPhotoChange_SD}>
                <button style={{ border: 0, background: 'none' }} type="button">
                  <PlusOutlined />
                </button>
              </Upload>
            </Form.Item>
            <Form.Item name="videoFiles" className='mb-3' label={t('生活视频') + " 🎥:"}>
              <Upload {...props_SD}>
                <Button icon={<UploadOutlined />}>{t('上传视频')}</Button>
              </Upload>
            </Form.Item>
            <Form.Item className='flex justify-center mb-3'>
              <Button type="primary" htmlType="submit">{t('确认')}</Button>
            </Form.Item>
          </Form>}
        </div>
      </div >
      <Footter />
      <Login show={showLogin} onEvent={onCloseLogin} />
      <Service />
    </>
  )
}

export default Application